<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getSimpleData } from '@/api/echarts'
const echartsRef = ref()

onMounted(async () => {
  const res = await getSimpleData()

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(echartsRef.value)

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'xxx 公司的销量图'
    },
    tooltip: {},
    xAxis: {
      // x轴
      data: res.data.data.map(item => item.name)
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: res.data.data.map(item => item.value)
      }
    ]
  }

  // 给myChart实例设置 option
  myChart.setOption(option)
})
</script>

<template>
  <div class="">
    <div ref="echartsRef" style="width: 100%; height: 600px"></div>
  </div>
</template>

<style scoped></style>
